<template>
  <div>
    <h1>企业管理</h1>
    <div class="list">
      <h3>超级企业列表({{ num }})</h3>
      <input
        type="text"
        v-model="name"
        placeholder="超级企业名称"
        @blur="includes"
      />
      <ul>
        <li
          v-for="item in arr"
          :key="item.id"
          @click="handleClick(item.id)"
          :class="{ active: selectedId === item.id }"
        >
          <div class=""></div>
          {{ item.ename }}
        </li>
      </ul>
    </div>
    <div class="main">
      <!-- <button>超级企业管理</button><button>子企业管理</button> -->
      <!-- <router-view></router-view> -->
    </div>
  </div>
</template>

<script>
import https from "@/utils/https";
export default {
  data() {
    return {
      selectedId: null,
      arr: [],
      // alive:"green"
      green: "green",
      red: "red",
      num: 0,
      name: "",
    };
  },
  mounted() {
    https
      .getlist()
      .then((a) => {
        this.arr = a.data.data;
        this.num = a.data.data.length;
        console.log(a);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    includes() {
      https
        .search({ ename: this.name })
        .then((a) => {
          this.arr = a.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(id) {
      this.selectedId = id;
    },
  },
  filters: {
    call(status) {
      if (status == 0) {
        return "red";
      }
    },
  },
};
</script>
<style lang='less' scoped>
* {
  list-style: none;
  text-decoration: none;
}
.list {
  padding: 10px;
  // display: inline-block;
  // display: flex;
  h3 {
    font-weight: 600;
  }
}

.main {
  // display: inline-block;
  position: fixed;
  left: 300px;
  top: 100px;
  background-color: #333;
}
ul {
  height: 750px;
  width: 130px;
  padding: 10px;
  overflow: scroll;
  li {
    white-space: nowrap;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin: 4px 0;
    list-style: none;
  }
  li.active {
    background-color: #203555;
    color: #00ff73;
    border-radius: 4px;
  }
}
.red {
  width: 1px;
  // height: 2px;
  border: 5px red solid;
  border-radius: 5px;
  display: inline-block;
}
.green {
  width: 1px;
  // height: 1px;
  border: 5px rgb(31, 219, 94) solid;
  border-radius: 5px;
  display: inline-block;
}
</style>